import React from 'react';
import { CSSTransition, SwitchTransition } from '../react-transition-group';
import './index.css';
const duration = 2000;
const buttonStyle = { width: '200px', height: '80px', fontSize: '40px', border: 'none', backgroundColor: 'green', color: 'white' };
function SwitchTransitionPage() {
  const [state, setState] = React.useState(true);
  return (
    <SwitchTransition>
      <CSSTransition
        key={state}
        timeout={duration}
        classNames="panel">
        <button style={buttonStyle} onClick={() => setState(state => !state)}>
          {state ? 'A面板' : 'B面板'}
        </button>
      </CSSTransition>
    </SwitchTransition >
  )
}
export default SwitchTransitionPage;